<template>
  <div class="register-page">
    <el-form
      ref="registerForm"
      :model="registerForm"
      :rules="rules"
      label-width="140px"
      size="small">
      <el-form-item label="姓名：" prop="name">
        <el-input type="text" v-model="registerForm.name" placeholder="姓名" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="tel">
        <el-input type="tel" v-model="registerForm.tel" placeholder="手机号码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码：" prop="IDNum">
        <el-input type="text" v-model="registerForm.IDNum" placeholder="身份证号码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="登录密码：" prop="psw">
        <el-input type="password" v-model="registerForm.psw" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认登录密码：" prop="repeatPsw">
        <el-input type="password" v-model="registerForm.repeatPsw" placeholder="重复登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right;">
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    /* 验证规则部分 S */
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓名'));
      } else {
        callback();
      }
    }
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registerForm.repeatPsw !== '') {
          this.$refs.registerForm.validateField('repeatPsw');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.psw) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    let validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
        if(!(/^1[34578]\d{9}$/.test(value))){
          callback(new Error('请输入正确的手机格式'));
        } else {
          callback();
        }
      }
    };
    let validateIDNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证号码'));
      } else {
        if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value))){
          callback(new Error('请输入正确的身份证格式'));
        } else {
          callback();
        }
      }
    };
    /* 验证规则部分 E */

    return {
      registerForm: {
        name: '',
        tel: '',
        IDNum: '',
        psw: '',
        repeatPsw: ''
      },
      rules: {
        name: [{ validator: validateName, trigger: 'blur' }],
        tel: [{ validator: validateTel, trigger: 'blur'}],
        IDNum: [{ validator: validateIDNum, trigger: 'blur'}],
        psw: [{ validator: validatePass, trigger: 'blur'}],
        repeatPsw: [{ validator: validatePass2, trigger: 'blur'}]
      }
    }
  },
  methods: {
    register () {
      console.log(this.registerForm)
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.$router.replace('/')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style>
.register-page {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-page .el-form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}
</style>
